<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
      <el-form-item label="评测名称" prop="evalutionName">
        <el-input
          v-model="queryParams.evalutionName"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createAt">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.createAt"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['evalution:labEvalution:edit']"
        >新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="labEvalutionList">
      <el-table-column label="编号" align="center" prop="instanceId" width="60"/>
      <el-table-column label="名称"  prop="evalutionName" :show-overflow-tooltip="true" />
      <el-table-column label="创建人" align="center" prop="createBy" width="80" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
      <el-table-column label="提交时间" prop="startTime" width="150p" align="center"/>
      <el-table-column label="执行步骤" prop="nodeName" align="center" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="结束时间" prop="endTime" width="150px" align="center"/>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetail(scope.row)"
            v-if="scope.row.flowStatusOpt!='uncommitted'"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['evalution:labEvalution:edit']"
             v-if="scope.row.flowStatusOpt=='uncommitted'"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['evalution:labEvalution:edit']"
            v-if="scope.row.flowStatusOpt=='uncommitted'"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改实验室测评对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-tabs v-model="activeName">
        <el-tab-pane label="流程表单" name="first"></el-tab-pane>
        <el-tab-pane label="流程导入" name="second" v-if="form.instanceId">
          <FlowChoose ref="workFlow" @workflow="setWorkflow" :id="form.workflowId" :businessType="form.businessTypeOpt"></FlowChoose>
        </el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-if="activeName=='first'">
      <el-form-item label="测评创建" prop="createTime">
        {{form.createTime}}<span style="margin-left: 20px;">由&nbsp;{{form.createBy}}&nbsp;创建&nbsp;&nbsp;</span>
      </el-form-item>

        <el-form-item label="测评名称" prop="evalutionName">
          <el-input v-model="form.evalutionName" placeholder="请输入名称" class="form_long"/>
        </el-form-item>
       <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="测评开始期间" prop="durationBegin">
              <el-date-picker clearable size="small" class="form_short"
                v-model="form.durationBegin"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择测评开始期间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="测评结束期间" prop="durationEnd">
              <el-date-picker clearable size="small" class="form_short"
                v-model="form.durationEnd"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择测评结束期间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
       <el-row>
         <el-col :span="12">
           <el-form-item label="测评开始时间" prop="evalutionStart">
             <el-date-picker clearable size="small" style="width: 200px"
               v-model="form.evalutionStart"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择测评开始时间">
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="测评结束时间" prop="evalutionEnd">
             <el-date-picker clearable size="small" style="width: 200px"
               v-model="form.evalutionEnd"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择测评结束时间">
             </el-date-picker>
           </el-form-item>
         </el-col>
       </el-row>
       <!-- <el-row>
         <el-col :span="12">
           <el-form-item label="述职开始时间" prop="reportStart">
             <el-date-picker clearable size="small" style="width: 200px"
               v-model="form.reportStart"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择述职开始时间">
             </el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="述职结束时间" prop="reportEnd">
             <el-date-picker clearable size="small" style="width: 200px"
               v-model="form.reportEnd"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择述职结束时间">
             </el-date-picker>
           </el-form-item>
         </el-col>
       </el-row> -->
       <el-form-item label="测评对象" prop="targetList">
         <div class="purchase_s_view">
           <el-input v-model="targetList"  style="width: 432px;"/>
           <el-button type="primary" @click="selectUser(form.targetList,'1')" plain>选择用户</el-button>
         </div>
       </el-form-item>
       <el-form-item label="测评用户" prop="userList">
         <div class="purchase_s_view">
           <el-input v-model="userList" style="width: 432px;"/>
           <el-button type="primary" @click="selectUser(form.userList,'2')" plain>选择用户</el-button>
         </div>
       </el-form-item>
       <el-form-item label="测评方案">
        <UploadCom ref="upload" @submitData="submitData" :description="'请上传方案附件'" :userFileList="fileList"
          class="form_long" />
       </el-form-item>
       <el-form-item label="备注说明" prop="mark">
         <el-input v-model="form.mark" placeholder="请输入备注说明"  rows="3" type="textarea" class="form_long"/>
       </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm"  v-if="activeName=='first'"
        v-hasPermi="['evalution:labEvalution:edit']">保存</el-button>
        <el-button type="primary" @click="submitWorkflow" v-if="activeName=='second'"
        v-hasPermi="['evalution:labEvalution:edit']">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <ChooseUser @chooseUsers="responseChoose" ref="chooseUser" ></ChooseUser>
    <Detail ref="detail" ></Detail>
  </div>
</template>

<script>
import { listLabEvalution, getLabEvalution, delLabEvalution, addLabEvalution, updateLabEvalution, commitEvalution } from "@/api/evalution/labEvalution";
import {
  formatCurrentDate
} from "@/utils/index";
import UploadCom from "@/views/labdata/commons/upload.vue";
import ChooseUser from "@/views/labdata/employee/user_choose_com.vue";
import FlowChoose from '@/views/labdata/flowDefination/flow_choose.vue'
import Detail from "./details.vue"
export default {
  name: "LabEvalution",
  components: {
    UploadCom,ChooseUser,Detail,FlowChoose
  },
  data() {
    return {
      activeName:'first',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 实验室测评表格数据
      labEvalutionList: [],
      // 弹出层标题
      title: "",
      //附件集合
      fileList: [],
      targetList:'',
      userList:'',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        evalutionName: null,
        createAt: null,
      },
      // 表单参数
      form: {
        userList:[],
        targetList:[],
        copyToUsers:'',
      },
      // 表单校验
      rules: {
        evalutionName: [
          { required: true, message: "名称不能为空", trigger: "blur" }
        ],
      /*  durationBegin: [
          { required: true, message: "测评开始期间不能为空", trigger: "blur" }
        ],
        durationEnd: [
          { required: true, message: "测评结束期间不能为空", trigger: "blur" }
        ], */
        evalutionStart: [
          { required: true, message: "测评开始时间不能为空", trigger: "blur" }
        ],
        evalutionEnd: [
          { required: true, message: "测评结束时间不能为空", trigger: "blur" }
        ],
       /* reportStart: [
          { required: true, message: "述职开始时间不能为空", trigger: "blur" }
        ],
        reportEnd: [
          { required: true, message: "述职结束时间不能为空", trigger: "blur" }
        ], */
        targetList: [
          { required: true, message: "测评对象不能为空", trigger: "blur" }
        ],
        userList: [
          { required: true, message: "测评人员不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch:{
    'form.userList':function(val){
      this.userList = '';
      if(val)
      val.forEach((item, index) => {
        if (index > 0) {
          this.userList += ",";
        }
        this.userList += item.nickName;
      })
    },
    'form.targetList':function(val){
      this.targetList = '';
      if(val)
      val.forEach((item, index) => {
        if (index > 0) {
          this.targetList += ",";
        }
        this.targetList += item.nickName;
      })
    },
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询实验室测评列表 */
    getList() {
      this.loading = true;
      listLabEvalution(this.queryParams).then(response => {
        this.labEvalutionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    submitWorkflow() {
		if(!this.form.workflowId){
		  this.form.workflowId = this.$refs["workFlow"].getWorkflowId();
		}
      commitEvalution(this.form).then((response) => {
        this.msgSuccess("提交成功");
        this.open = false;
        this.getList();
      });
    },
    setWorkflow(workflowId) {
      this.form.workflowId = workflowId;
    },
    handleDetail(row){
      this.$refs["detail"].handleUpdate(row);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userList:[], //因为监听了该属性，所以比必须先初始化
        targetList:[],//因为监听了该属性，所以比必须先初始化
        copyToUsers:'',
      };
      this.fileList = [];
      this.userList = '';
      this.targetList = '';
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.createTime = formatCurrentDate();
       this.form.createBy = this.$store.state.user.name;
      this.open = true;
      this.title = "添加实验室测评";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const instanceId = row.instanceId
      getLabEvalution(instanceId).then(response => {
        this.form = response.data;
        this.fileList = this.form.images;
        this.open = true;
        this.title = "修改实验室测评";
      });
    },
    /** 提交按钮 */
    submitData(allFiles) {
      this.form.images = allFiles;
      if (this.form.instanceId != null) {
        updateLabEvalution(this.form).then(response => {
          this.msgSuccess("修改成功");
          //this.open = false;
          this.form = response.data;
          this.getList();
        });
      } else {
        addLabEvalution(this.form).then(response => {
          this.form = response.data;
          this.msgSuccess("新增成功");
          //this.open = false;
          this.getList();
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
           this.$refs["upload"].doSubmit();
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const instanceId = row.instanceId || this.ids;
      this.$confirm('是否确认删除实验室测评编号为"' + instanceId + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delLabEvalution(instanceId);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
   getTargets(items){
    this.form.targetList = [];
    if(items && items.length>0)
    items.forEach((item, index) => {
      this.form.targetList .push({userName:item.userName, nickName:item.nickName});
    })
    //this.$forceUpdate();
   },
   getUsers(items){
    this.form.userList = [];
    this.form.copyToUsers = '0';
    if(items && items.length>0)
    items.forEach((item, index) => {
      this.form.userList.push({userName:item.userName, nickName:item.nickName});
      this.form.copyToUsers +=','+item.userId;
    })
   },
   responseChoose(arg1, arg2){
     if(arg2=='1'){
       this.getTargets(arg1);
     }else if(arg2=='2'){
       this.getUsers(arg1);
     }
   },
   selectUser(chooseItems, callType){
     this.$refs["chooseUser"].handleAdd(chooseItems, callType);
   },
  }
};
</script>
<style type="text/css" scoped>
  .form_long {
    width: 530px;
  }

  .form_short {
    width: 200px;
  }
  .purchase_s_view {
    display: flex;
    flex-direction: row;
  }
  /deep/.el-dialog__body {
      padding: 0px 20px;
  }
</style>
